<template>
  <div class="announcements-page">
    <div class="container">
      <h1 class="page-title">服务器公告</h1>
      
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" v-for="news in newsList" :key="news.id">
          <el-card class="news-card" shadow="hover" @click="viewNews(news.id)">
            <div class="news-image">
              <img :src="news.imageUrl" :alt="news.title" />
            </div>
            <div class="news-content">
              <h3>{{ news.title }}</h3>
              <p class="news-date">{{ news.date }}</p>
              <p class="news-excerpt">{{ news.content.substring(0, 120) }}...</p>
              <el-button type="primary" size="small">阅读更多</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[6, 12, 24]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { getNewsData } from '../api/serverApi'

export default {
  name: 'AnnouncementsPage',
  setup() {
    const router = useRouter()
    const newsList = ref([])
    const currentPage = ref(1)
    const pageSize = ref(6)
    
    const total = computed(() => newsList.value.length)
    
    const paginatedNews = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return newsList.value.slice(start, end)
    })

    const viewNews = (id) => {
      router.push(`/announcements/${id}`)
    }

    const handleSizeChange = (val) => {
      pageSize.value = val
      currentPage.value = 1
    }

    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

    onMounted(() => {
      newsList.value = getNewsData()
    })

    return {
      newsList: paginatedNews,
      currentPage,
      pageSize,
      total,
      viewNews,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.announcements-page {
  padding: 20px 0;
}

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  color: #4CAF50;
}

.news-card {
  cursor: pointer;
  transition: transform 0.3s;
  height: 100%;
  margin-bottom: 20px;
}

.news-card:hover {
  transform: translateY(-5px);
}

.news-image {
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 15px;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.news-card:hover .news-image img {
  transform: scale(1.1);
}

.news-content h3 {
  color: #4CAF50;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.news-date {
  color: #999;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.news-excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .news-card {
    margin-bottom: 15px;
  }
}
</style> 